<template>
  <div class="userAdd">
    <el-form :model="formItem" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-col :span="10" :offset="1">
        <el-form-item label="登录名" prop="loginName">
          <el-input class="form_add" ref="loginName" v-model.trim="formItem.loginName"></el-input>
        </el-form-item>
        <el-form-item label="登录密码" prop="password">
          <el-input class="form_add" ref="password" type="password" v-model.trim="formItem.password"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="userName">
          <el-input class="form_add" ref="userName" v-model.trim="formItem.userName"></el-input>
        </el-form-item>
        <el-form-item label="用户类别" prop="userType">
          <Select class="form_add" v-model="formItem.userType">
            <Option v-for="item in formItem.userTypeList" :value="item.dicVal" :key="item.dicBh">{{ item.dicName }}</Option>
          </Select>
        </el-form-item>
        <el-form-item label="手机号码" prop="mobile">
          <el-input class="form_add" v-model.trim="formItem.mobile"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="note">
          <el-input v-model.trim="formItem.note" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="USBKEY设置" prop="userKey">
          <el-col :span="15"><el-input v-model.trim="formItem.userKey" class="mishi form_add"></el-input></el-col>
          <el-col :span="8" :offset="1"><el-button style="height:40px;padding:0 25px;">设置</el-button></el-col>
        </el-form-item>
      </el-col>
      <el-col :span="10" :offset="1">
        <el-form-item label="角色" prop="roles" required>
          <Select ref="roles" v-model="model10" multiple style="width:100%">
            <Option v-for="item in roles" :value="item.roleBh" :key="item.roleBh">{{ item.roleName }}</Option>
          </Select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item>
          <el-button class="save" type="primary" @click="add('ruleForm')">保存</el-button>
          <el-button class="quxiao" @click="closeLayer">取消</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "userAdd",
  data() {
    return {
      selectform: {
        pageSize: 10000,
      },
      selectlist: {
        pageSize: 10000,
        dicMark:'USER_IDENTIFY'
      },
      formItem: {
        loginName: "",
        password: "",
        userName: "",
        userType: "",
        userKey: "",
        mobile: "",
        note: "",
        isLock: true,
        userTypeList: []
      },
      rules: {
        loginName: [
          { required: true, message: "请填写登录名", trigger: "blur" },
          { min: 3, max: 20, message: "长度3-20", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请填写密码", trigger: "blur" },
          { min: 6, message: "不能小于6位", trigger: "blur" }
        ],
        userName: [
          { required: true, message: "请填写用户名", trigger: "blur" },
          { max: 200, message: "不能超出长度200", trigger: "blur" }
        ],
        note: [
          {  trigger: "blur" },
          { min: 0, max: 200, message: "长度在 0 到 200 个字符", trigger: "blur" }
        ],
        roles: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个角色",
            trigger: "change"
          }
        ]
      },
      roles: [],
      model10: []
    };
  },
  mounted: function() {
    this.$nextTick(() => {
      this.getRoles(); //获取全部角色
      this.getRoleType(); //获取全部用户类型
    });
  },
  methods: {
    //关闭layer弹窗
    closeLayer() {
      layer.closeAll();
    },
    //获取全部角色
    getRoles() {
      axios
        .get(URL + "/api/userservice/v1/roles/all",{
          headers: {'Authorization': appDB.get("userInfo").token},
          params: this.selectform
        })
        .then(response => {
          let d = response.data;
          if (d.resultCode == 0) {
            this.roles = d.record;
            // console.info(this.roles)
          } else {
            layer.msg(d.msg);
          }
        })
        .catch(error => {
          layer.msg("网络错误");
        });
    },
    //获取用户类型
    getRoleType() {
      this.$nextTick(() => {
        axios
          .get(dictionariesURL, {
            headers: {'Authorization': appDB.get("userInfo").token},
            params: this.selectlist
          })
          .then(response => {
            let d = response.data;
            console.info(d)
            if (d.resultCode == 0) {
              this.formItem.userTypeList = d.record.rows;
            } else {
              layer.msg(d.msg);
            }
          })
          .catch(error => {
            layer.msg("网络错误");
          });
      });
    },
    //新增
    add(formName) {
      if (this.$refs.loginName.value == "") {
        layer.msg("请填写登录名");
        this.$refs.loginName.focus();
      } else if (this.$refs.password.value == "") {
        layer.msg("请填写登录密码");
        this.$refs.password.focus();
      } else if (this.$refs.userName.value == "") {
        layer.msg("请填写用户名");
        this.$refs.userName.focus();
      } else if (this.$refs.roles.value == "") {
        layer.msg("请选择角色");
      } else {
        axios
          .post(
            usersURL,
            {
              loginName: this.formItem.loginName,
              password: this.formItem.password,
              userName: this.formItem.userName,
              userType: this.formItem.userType,
              mobile: this.formItem.mobile,
              note: this.formItem.note,
              isLock: this.formItem.isLock,
              userKey: this.formItem.userKey,
              roles: this.model10
            },
            {
              headers: {'Authorization': appDB.get("userInfo").token},
            }
          )
          .then(response => {
            let d = response.data;
            if (d.resultCode == 0) {
              this.closeLayer(); //关闭弹窗
              this.$parent.getUsers(); //添加成功以后重新渲染列表获得最新数据
            } else {
              layer.msg(d.msg);
            }
          })
          .catch(error => {
            layer.msg("网络错误");
          });
      } //else
    }
  }
};
</script>

<style scoped>
@import "../assets/css/elementUI.css";
.userAdd {
  width: 100%;
  float: left;
  margin-top: 20px;
}
.ivu-input {
  padding: 0 7px !important;
}
.row {
  margin: 30px 0 0 0;
  padding: 0 30px;
}
.ivu-switch-checked {
  border-color: #38b824;
  background-color: #38b824;
}
.quxiao {
  background: #cecece;
  float: right;
  padding: 7px 40px;
  margin-right: 30px;
  border-radius: 30px;
}
.save {
  float: right;
  margin-right: 8%;
  border-radius: 30px;
  padding: 7px 40px;
  background: #39b423;
  border: 1px solid #39b423;
  color: #fff;
}
</style>


